<template>
  <div class="flowingWater">
    <header>

    </header>

    <section>
      <el-form :model="searchForm" class="search">
        <el-form-item>
          <el-input placeholder="订单号" v-model="searchForm.tradeNo" @change="getFormData" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.value" @change="changeType" placeholder="请选择交易类型" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="交易日期:" style="width: 430px;">
          <el-date-picker
            v-model="searchForm.value1"
            type="daterange"
            @change="changeDate"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border height="calc(100% - 50px)">
        <el-table-column label="订单号" prop="tradeNo" align="center"></el-table-column>
        <!-- <el-table-column label="流水号" prop="" align="center"></el-table-column> -->
        <el-table-column label="支付账户" prop="accountNo" align="center"></el-table-column>
        <el-table-column label="交易内容" prop="tradeDescribe" align="center"></el-table-column>
        <!-- <el-table-column label="关联车场" prop="" align="center"></el-table-column> -->
        <el-table-column label="交易时间" prop="tradeTime" align="center"></el-table-column>
        <el-table-column label="交易金额(元)" prop="amount" align="center"></el-table-column>
        <!-- <el-table-column label="实交易金额(元)" prop="" align="center"></el-table-column> -->
        <!-- <el-table-column label="分润(元)" prop="" align="center"></el-table-column> -->
        <el-table-column label="交易类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.tradeType | tradeTypeFilter}}
          </template>
        </el-table-column>
        <el-table-column label="平台账户变动" align="center">
          <template slot-scope="scope">
            {{ scope.row.inOut | inOutFilter}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">

          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 12px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>
  </div>
</template>

<script>
  export default {
    name: 'flowingWater',
    filters: {
      inOutFilter(inOut) {
        return inOut == 1 ? '进账' : '出账'
      },
      tradeTypeFilter(type) {
        switch (type) {
          case 0:
            return '其他';
          case 1:
            return '代缴';
          case 2:
            return '分润';
          case 3:
            return '退款';
          case 4:
            return '充值';
          case 5:
            return '月卡'
        }
      }
    },
    data() {
      return {
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0,
        options: [
          {
            value: 1,
            label: '代缴'
          },
          {
            value:2,
            label: '分润'
          },
          {
            value: 3,
            label: '退款'
          },
          {
            value: 4,
            label: '充值'
          },
          {
            value: 5,
            label: '月卡'
          },
          {
            value: 0,
            label: '其他'
          },
        ]
      }
    },
    mounted() {
      this.getFormData();
    },
    methods: {
      getFormData() {
        this.$axios({
          method: 'post',
          url: '/finance/transactionRecord/getPage',
          data: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      changeType(e) {
        this.searchForm.tradeType = e;
        this.getFormData();
      },

      changeDate(date) {
        if(date) {
          this.searchForm.tradeStartTime = date[0];
          this.searchForm.tradeEndTime = date[1];
        } else {
          this.searchForm.tradeStartTime = null;
          this.searchForm.tradeEndTime = null;
        }
        this.getFormData();
      },


      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getFormData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        this.getFormData();
      }
    }
  }
</script>

<style scoped>
  .flowingWater {
    height: calc(100vh - 84px);
    padding: 10px;
  }

  header {
    height: 150px;
  }

  section {
    height: calc(100% - 200px);
  }

  footer {
    height: 50px;
  }

  .search {
    height: 50px;
    padding-left: 20px;
  }

  .search .el-form-item {
    display: inline-block;
    margin-right: 10px;
  }

  .search .el-input {
    width: 240px;
  }



</style>
